<!--
 * @Descripttion: 课件播放页
 * @Author: wult
 * @Date: 2021-04-06 11:55:24
 * @LastEditTime: 2021-04-12 16:27:24
-->

<template>
  <div class="view-course">
    <pageView v-if="!testPaper" :currentFile="currentFile"/>
    <iframe
        allowfullscreen="true"
        :src="iframePath"
        frameborder="0"
        id="course-iframe"
        style="width: 100%; height: 100%"
        ref="paperDom"
        v-else
    />
    <div class="options-container">
      <div class="tool-bar-container">
        <el-collapse-transition>
          <div v-show="showLeftBar">
            <div class="top-style">
              <i class="el-icon-arrow-up"></i>
            </div>
            <div class="tool-bar-list">
              <div class="tool-bar-item" @click="showSourceList('left')">
                <img src="~@/assets/course/course-changeSource.png"/>
                <span>切换资料</span>
              </div>
              <div class="tool-bar-item" @click="classOver">
                <img src="~@/assets/course/course-classOver.png"/>
                <span>下课</span>
              </div>
              <div class="cus-divider"></div>
            </div>
          </div>
        </el-collapse-transition>
        <div
            :class="['tool-bar-item', showLeftBar ? 'toolbox-open' : 'tool-box']"
            @click="changeToolState('left')"
        >
          <img
              style="height: 28px; width: 28px"
              src="~@/assets/course/course-tool.png"
          />
          <span>工具箱</span>
        </div>
        <div class="tool-bar-item tool-full" @click="fullScreenBtn">
          <img v-if="!fullScreenState" src="~@/assets/course/full-open.png"/>
          <img v-else src="~@/assets/course/full-close.png"/>
          <span>{{ fullScreenState ? "收起" : "展开" }}</span>
        </div>
      </div>
      <transition name="el-fade-in-linear">
        <div :class="['source-container',sourcePosition == 'left' ? 'source-container-left' : 'source-container-right']"
             v-if="sourceListVisible">
          <div class="container-scroll">
            <i class="el-icon-close" @click="hiddenSource"></i>
            <div class="source-list-container">
              <div class="course-container" v-for="(val, idx) in Object.keys(sourceData)" :key="idx">
                <template v-if="sourceData[val] && sourceData[val].length">
                  <span>{{ generateName(val) }}</span>
                  <div class="course-list">
                    <div v-for="(item, index) in sourceData[val]" :key="item.id"
                         :class="['course-item', item.id == currentFile.id ? 'current-course-item' : '' ]"
                         @click="chooseOpen(val, item, index, sourceData[val])">
                      <el-image class="cus-img" :src="baseApi + item.imgPath" alt=""/>
                      <span class="course-title">{{ item.title }}</span>
                    </div>
                  </div>
                </template>
              </div>
              <div class="no-source" v-if="!currentFile.id">暂无资料</div>
            </div>
          </div>
        </div>
      </transition>

      <div class="tool-bar-container">
        <el-collapse-transition>
          <div v-show="showRightBar" class="animation-list">
            <div class="top-style">
              <i class="el-icon-arrow-up"></i>
            </div>
            <div class="tool-bar-list">
              <div class="tool-bar-item" @click="showSourceList('right')">
                <img src="~@/assets/course/course-changeSource.png"/>
                <span>切换资料</span>
              </div>
              <div class="tool-bar-item" @click="classOver">
                <img src="~@/assets/course/course-classOver.png"/>
                <span>下课</span>
              </div>
              <div class="cus-divider"></div>
            </div>
          </div>
        </el-collapse-transition>
        <div
            :class="['tool-bar-item', showRightBar ? 'toolbox-open' : 'tool-box']"
            @click="changeToolState('right')"
        >
          <img
              style="height: 28px; width: 28px"
              src="~@/assets/course/course-tool.png"
          />
          <span>工具箱</span>
        </div>

        <div class="tool-bar-item tool-full" @click="fullScreenBtn">
          <img v-if="!fullScreenState" src="~@/assets/course/full-open.png"/>
          <img v-else src="~@/assets/course/full-close.png"/>
          <span>{{ fullScreenState ? "收起" : "展开" }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {ref, inject, onMounted, nextTick, computed} from "vue";
import {ElMessage, ElLoading, ElMessageBox} from "element-plus";
import $, {emitter} from "$";
import PageView from "./pageView.vue";
import Moment from "moment";
import screenfull from "screenfull";
import store from "@/views/test-paper/update/store/index";

export default {
  components: {PageView},
  props: {
    id: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
  },
  setup(props) {
    onMounted(() => {
      if (!screenFull.value.isFullscreen) {
        screenFull.value.toggle();
      }
    });
    let screenFull: any = ref(screenfull);
    let close: any = inject("close");
    let baseApi: any = import.meta.env.VITE_APP_BASE_URL;
    let web365: any = $.utils.generatBasePath();
    let showRightBar = ref(false);
    let showLeftBar = ref(false);
    let sourceData = ref({});
    let sourceListVisible = ref(false);
    let sourcePosition = ref("right");
    let currentFile = ref({});
    let testPaper = ref(false);
    let fullScreenState = ref(true);
    let paperDom = ref();
    let iframePath: any = ref(
        `${web365}furl=${baseApi}/upload/202103/12/1615529282616774486.pptx`
    );
    let currentINdex: any = ref(0)
    let currentList: any = ref([])
    /**
     * 获取资源列表
     * 7：试卷、 1： 课件、 4：其他、 6：多媒体
     */
    const getCourseSource = async () => {
      let res: any = await $.http.post("/admin/prepareLesson/queryTeachingMaterial", {courseIndexId: props.id});
      if (res.result) {
        sourceData.value = res.json;
        currentFile.value = res.json[1][0] || res.json[4][0]
      }
    };
    const generateName = (key: number | string) => {
      switch (key) {
        case '7':
          return '试卷';
          break;
        case '1':
          return "课件";
          break;
        case '4':
          return "其他";
          break;
        case '6':
          return '多媒体';
          break;
        default:
          return '';
      }
    };
    const chooseOpen = (key: string | number, item:Record<string, any>, index, sourceData) => {
      fnMap.get(key)(item, index, sourceData)
    };
    getCourseSource();
    /** 展开工具栏 */
    const changeToolState = (position) => {
      if (position == "right") {
        showRightBar.value = !showRightBar.value;
        showLeftBar.value = false;
      } else {
        showLeftBar.value = !showLeftBar.value;
        showRightBar.value = false;
      }
    };
    /** 展示资源列表 */
    const showSourceList = (position) => {
      sourcePosition.value = position;
      sourceListVisible.value = !sourceListVisible.value;
    };
    /** 隐藏资源列表 */
    const hiddenSource = () => {
      sourceListVisible.value = false;
    };
    /** 切换当前播放资料 */
    /**
     * @params result 初始Array
     * @params locaValue -> postmessage的变化值
     * @params item.PAGEINDEX -> 判断当前项有没有浏览过的记录（记录之前的页数
     */
    const changeCourse = (item: any, index: number, list: any[]) => {
      let result: any = sourceData.value[1] || sourceData.value[4]
      let locaValue: any = localStorage.getItem('PAGEINDEX')
      // console.log(result, 'result', currentINdex.value, index)
      if (!item.PAGEINDEX && locaValue) {
        result[currentINdex.value].PAGEINDEX = locaValue && Number(locaValue)
      } else if (item.PAGEINDEX && locaValue != item.PAGEINDEX && currentINdex.value !== index && locaValue) {
        result[currentINdex.value].PAGEINDEX = locaValue && Number(locaValue)
      }

      localStorage.removeItem('PAGEINDEX')

      let timer = setTimeout(() => {
        clearTimeout(timer)
        testPaper.value = false;
        currentFile.value = item;

        currentINdex.value = index
      }, 100)
      hiddenSource();
    };
    /** 切换试卷 */
    const changeTestPaper = async (item) => {
      if (item.sourceFrom === 3) {
        iframePath.value = `${$.utils.generatBasePath()}furl=${
            import.meta.env.VITE_APP_BASE_URL
        }${item.filePath}`;
      } else {
        iframePath.value = `./#/test-paper-edit/true/${item.id}?showDownload=false&whiteStyle=white-style`;
        nextTick(() => {
          paperDom.value.contentDocument.location.reload(true);
        });
      }

      testPaper.value = true;
      hiddenSource();
    };
    let fnMap = new Map<string | number, any>([['7', changeTestPaper], ['4', changeCourse], ['1', changeCourse], ['6', changeCourse]]);
    /** 下课 */
    const classOver = async () => {
      await ElMessageBox.confirm(
          "下课后，将退出资料播放界面 是否直接下课？",
          "下课确认",
          {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning",
          }
      );
      if (screenFull.value.isFullscreen) {
        fullScreenBtn();
      }
      close();
      emitter.emit("class-over");
    };
    /** 全屏 */
    const fullScreenBtn = () => {
      screenFull.value.toggle();
    };
    screenFull.value.on("change", () => {
      fullScreenState.value = screenFull.value.isFullscreen;
    });

    return {
      close,
      baseApi,
      web365,
      showRightBar,
      changeToolState,
      iframePath,
      currentFile,
      classOver,
      sourceData,
      showLeftBar,
      sourcePosition,
      showSourceList,
      hiddenSource,
      sourceListVisible,
      testPaper,
      fullScreenBtn,
      fullScreenState,
      paperDom,
      generateName,
      chooseOpen
    };
  },
};
</script>
<style scoped lang="scss">

.view-course {
  > :deep(.body-right) {
    height: 100vh;
    display: flex;
    justify-content: center;

    > iframe {
      height: 100vh !important;
    }
  }

  background: $--background-color-base;
  height: 100vh;
  overflow: hidden;

  .options-container {
    z-index: 3000;
    position: absolute;
    bottom: 70px;
    right: 5px;
    left: 5px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;

    .options-btn {
      width: 100px;
    }
  }

  .tool-bar-container {
    pointer-events: auto;
    border-radius: 6px 6px 8px 8px;
    padding: 0 10px;
    justify-content: flex-end;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 327px;
    width: 90px;

    .top-style {
      height: 12px;
      background: rgba(0, 8, 73, 0.25);
      border-radius: 8px 8px 0px 0px;
      display: flex;
      justify-content: center;
      margin: 0 14px;

      > i {
        color: #fff;
      }
    }

    .tool-bar-list {
      background: rgba(0, 8, 73, 0.3);
      z-index: 3020;
      border-radius: 6px 6px 0 0;

      > .tool-bar-item {
        background: transparent;
      }
    }

    .cus-divider {
      height: 1px;
      background: #fff;
      z-index: 3021;
      margin: 0 6px;
    }

    .tool-box {
      border-radius: 6px 6px 8px 8px;
    }

    .toolbox-open {
      border-radius: 0 0 8px 8px;
    }

    .tool-full {
      background: rgba(0, 8, 73, 0.3);
      border-radius: 6px 6px 8px 8px;
      margin-top: 15px;

      > img {
        height: 28px;
        width: 28px;
      }
    }

    .tool-bar-item {
      padding: 10px 6px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: rgba(0, 8, 73, 0.3);
      cursor: pointer;

      > img {
        height: 36px;
        width: 36px;
      }

      > span {
        font-size: 13px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        white-space: nowrap;
      }

      > img {
        margin-bottom: 5px;
      }
    }
  }

  .source-container {
    pointer-events: auto;
    height: 237px;
    width: calc(100vw - 370px);
    position: relative;

    .container-scroll {
      > i {
        position: absolute;
        top: 5px;
        right: 5px;
        cursor: pointer;
        color: #fff;
        font-size: 18px;
      }

      background-color: rgba(127, 127, 127, 0.5);
      padding: 10px 30px;
      border-radius: 12px;
      height: 100%;
    }

    .source-list-container {
      max-width: calc(100vw - 370px);
      overflow-x: auto;
      overflow-y: hidden;
      display: inline-block;
      white-space: nowrap;
      position: relative;
      height: 100%;

      > :nth-child(3) {
        margin: 0 20px;
      }

      .course-container {
        overflow: hidden;
        display: inline-block;
        vertical-align: middle;
        height: 100%;
        padding: 15px 0;

        > span {
          width: auto;
          background: #72b22a;
          border-radius: 13px;
          border: 1px solid #ffffff;
          font-size: 18px;
          color: #ffffff;
          line-height: 25px;
          padding: 3px 14px;
        }

        .course-list {
          display: flex;
          margin-top: 10px;

          :nth-last-child(1) {
            margin-right: 0;
          }
        }

        .course-item {
          display: flex;
          width: 130px;
          height: 100%;
          flex-direction: column;
          margin-right: 15px;
          padding: 5px;

          .cus-img {
            height: 83px;
            width: 111px !important;
          }

          cursor: pointer;

          .course-title {
            font-size: 13px;
            font-weight: 400;
            color: #ffffff;
            white-space: normal;
          }

          :deep(.el-image) {
            height: 94px;
            width: 100%;
          }
        }

        .current-course-item {
          background: rgba(0, 8, 73, 0.3);
        }
      }

      .no-source {
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 50px;
      }
    }
  }

  .source-container-left {
    display: flex;
    justify-content: flex-start;
  }

  .source-container-right {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
